import React, { useCallback, useRef } from 'react';
import { StyleSheet, TouchableOpacity, Image, Dimensions, Platform, View } from 'react-native';
import { ThemedText } from './ThemedText';
import { ThemedView } from './ThemedView';
import { Dish } from '@/types/dish';
import { FontAwesome } from '@expo/vector-icons';

// 计算卡片宽度
const windowWidth = Dimensions.get('window').width;
const cardWidth = (windowWidth - 48 - 10) / 2; // 修改卡片宽度计算：左右padding 16 + 中间间距 20

type Props = {
  dish: Dish;
  onLike?: (id: string, x: number, y: number) => void;
  isLiked?: boolean;
};

const DishCard = ({ dish, onLike, isLiked = false }: Props) => {
  const heartIconRef = useRef<View>(null);

  const handlePress = useCallback(() => {
    if (!onLike) return;

    // 如果已经喜欢，传递 0 坐标表示不需要动画
    if (isLiked) {
      onLike(dish.id, 0, 0);
      return;
    }

    // 获取爱心图标的位置
    heartIconRef.current?.measure((x, y, width, height, pageX, pageY) => {
      if (typeof pageX === 'number' && typeof pageY === 'number') {
        // 使用图标的中心点作为起始位置
        const startX = pageX + width / 2;
        const startY = pageY + height / 2;
        onLike(dish.id, startX, startY);
      }
    });
  }, [dish.id, isLiked, onLike]);

  return (
    <TouchableOpacity 
      style={styles.container}
      onPress={handlePress}
      activeOpacity={0.7}
    >
      <Image 
        source={dish.image} 
        style={styles.image}
        resizeMode="cover"
      />
      <ThemedView style={styles.content}>
        <ThemedText style={styles.title}>{dish.name}</ThemedText>
        <ThemedText style={styles.description} numberOfLines={2}>
          {dish.description}
        </ThemedText>
        <ThemedView style={styles.priceContainer}>
          <ThemedText style={styles.price}>
            {/* <ThemedText style={styles.priceSymbol}>¥</ThemedText> */}
            {/* {dish.price} */}
          </ThemedText>
          <View ref={heartIconRef}>
            <FontAwesome 
              name={isLiked ? "heart" : "heart-o"} 
              size={22} 
              color="#ff4d4f" 
            />
          </View>
        </ThemedView>
      </ThemedView>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    width: cardWidth,
    backgroundColor: '#fff',
    borderRadius: 12,
    marginBottom: 14, // 增加底部间距
    overflow: 'hidden',
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.1,
        shadowRadius: 4,
      },
      android: {
        elevation: 3,
      },
      web: {
        boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)',
      },
    }),
  },
  image: {
    width: cardWidth,
    height: cardWidth,
  },
  content: {
    padding: 12,
  },
  title: {
    fontSize: 16,
    fontWeight: 'bold',
    // marginBottom: 2,
  },
  description: {
    fontSize: 12,
    color: '#666',
    overflow:'hidden',
    marginTop: 4,
    // marginBottom: 4,
  },
  priceContainer:{
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center',
  },
  price: {
    marginTop: 4,
    fontSize: 18,
    color: '#ff4d4f',
    fontWeight: 'bold',
  },
  priceSymbol: {
    fontSize: 14,
    color: '#ff4d4f',
    fontWeight: 'normal',
  },
});

export default DishCard; 